<template>
  <div class="order">
    <common-head title="订单结算" :rightText="rightText"></common-head>
    <div class="main">
      <div class="order-title">
        <table></table>
        <p>收货地址</p>
      </div>
      <div class="contact-cart">
        <div class="address-box">
          <van-contact-card
            :type="cardType"
            :name="address.name"
            :tel="address.tel"
            @click="addAddress"
          />
          <p class="card-address">
            <span>收货地址：</span>
            <span class="address">{{address.addressDetail}}</span>
          </p>
        </div>
      </div>
      <van-notice-bar mode="closeable">因商品库存实时变化，请您尽快完成付款，以免订单交易失败!!!</van-notice-bar>
      <div class="orderLists">
        <div class="s-order" v-for="(order,index) in orders[0].itemLists" :key="index">
          <van-card
            :num="order.itemNum"
            :price="order.minPrice"
            :title="order.name"
            :thumb="order.pic"
            :desc="order.recommendStatusStr"
            tag="Hot"
          ></van-card>
        </div>
      </div>
    </div>
    <van-panel title="付款方式" desc="在线支付" />
    <div class="foot">
      <van-submit-bar :price="orders[0].total*100" button-text="提交订单" @submit="onSubmit" />
    </div>
  </div>
</template>

<script>
import CommonHead from "components/CommonHead";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      cardType: "add",
      rightText: ""
    };
  },
  mounted() {
    // 获取默认值
    this.setDefaultAds();
    if (this.address.name) {
      this.cardType = "edit";
    }
  },

  methods: {
    addAddress() {
      // 添加联系人
      // 进入 联系人列表
      this.$router.push("/address");
    },
    onSubmit() {
      // 提交订单 到支付页面
      // 判断 有没有 收货人 如果没有收货人，弹出提示框 添加联系人
      if (!this.address) {
        this.$toast.fail({
          message	:"请添加联系人",
          duration	:1000
        });
      } else {
        let _this = this;
        this.$toast.success({
          message	:"支付成功",
          duration	:1000,
          onClose(){
            _this.$router.push({path:'/'})
          }
        });
      }
    },
    ...mapActions(["setDefaultAds"])
  },
  components: {
    CommonHead
  },
  computed: {
    address() {
      return this.selectAddress;
    },
    ...mapState(["orders", "selectAddress"])
  }
};
</script>

<style lang="less" scoped>
.order {
  /deep/.van-nav-bar {
    background: #fff !important;
    .van-icon-arrow-left {
      color: #333 !important;
    }
    .van-nav-bar__title {
      color: #333 !important;
    }
  }
  .main {
    width: 100%;
    overflow: hidden;
    padding-top: 65px;
    padding-bottom: 50px;
    position: relative;
    z-index: 0;
    .order-title {
      position: absolute;
      width: 100%;
      z-index: -1;
      background-image: linear-gradient(
        90deg,
        #45dfab 0,
        #4addbd 70%,
        #4fdace 100%
      );
      color: #fff;
      height: 43px;
      padding: 0 14px 65px;
      p {
        line-height: 20px;
        margin-top: 23px;
      }
    }
    .contact-cart {
      margin: 56px 13px 13px;
      .address-box {
        position: relative;
        /deep/.van-cell {
          box-shadow: 0 0.18518519rem 0.40740741rem 0 rgba(204, 204, 204, 0.6) !important;
          border-radius: 8px !important;
          padding-bottom: 45px !important;
        }
        .card-address {
          padding: 0 16px;
          margin-left: 25px;
          font: 14px "微软雅黑";
          color: #333;
          position: absolute;
          bottom: 26px;
          display: flex;
          align-items: center;
          span {
            display: inline-block;
          }
          .address {
            width: 230px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .van-card {
      background: #fff;
      box-shadow: 0 0 0.40740741rem 0 rgba(204, 204, 204, 0.2);
      .van-card__title {
        margin-top: 10px;
        margin-left: 10px;
      }
      .van-card__price {
        margin-left: 10px;
        margin-top: 24px;
        font-size: 16px;
      }
      .van-card__desc {
        margin-left: 10px;
      }
      .van-card__num {
        margin-top: 24px !important;
      }
    }
  }
}
</style>